import React, { Component } from 'react';
import './index.less';
import {withRouter} from 'react-router-dom' 
class SearchInput extends Component {
    constructor(props){
        super(props)
        this.state={
            values:''
        }
    }
    componentWillMount(){
       let values = decodeURIComponent(sessionStorage.getItem('searchValues')) !== "null" ? decodeURIComponent(sessionStorage.getItem('searchValues')) : ''
        this.setState({
            values 
        })
    }
    inputChange = (e)=>{
        this.setState({
            values:e.target.value
        },()=>{
            sessionStorage.setItem('searchValues',encodeURIComponent(this.state.values))
        })
    }
    pressEnter = e =>{
       if(e.code === 'Enter' || e.code === 'NumpadEnter'){
           this.props.history.push(`/search/${this.state.values}`)
       }
    }
    render() {

        return (
           <input type="text" className='search-input' 
           value={this.state.values}
           onChange={this.inputChange}
           onKeyUp={this.pressEnter} 
           />
        );
    }
}

export default withRouter(SearchInput);